[小ネタ]LINE Payを使ったLINEボットの決済後フローを改善してみた #LINE_API

はじめに

こんにちは、中村です。

最近LINEボットにてLINE Payを利用した決済を行う仕組みを構築しています。構築を進めるにあたってLINE Payにて決済を行なった後にトークへ戻りたいニーズがあると思います。今回は改善にあたり実施したものをまとめておきます。

決済後フローを改善する

リクエストのConfirmUrlTypeとレスポンスのpaymentUrlの2つで体験が違います。今回のニーズには下記の条件時に対応が可能です。

• ConfirmUrlType=CLIENT かつ paymentUrl=webの場合
• ConfirmUrlType=SERVER かつ paymentUrl=appの場合

ConfirmUrlType=CLIENT かつ paymentUrl=webの場合

決済完了後、ConfirmUrlに指定したアドレスに遷移します。遷移先の画面は閉じないので、友達追加リンクを用意します。すでに友達になっている場合は、トークへ遷移することができます。サーバーレスで仕組みを作成するとこのようになります。

API Gatewayは、下記の設定を行います。

メソッドリクエスト

統合リクエスト

メソッドレスポンス

Lambdaではレスポンスをこのような形で指定します。

exports.handler = async(event) => {
    transactionIdを仕様して確定処理など....
    :
    :
    :
    let response = {
        isBase64Encoded: false,
        statusCode: 301,
        headers: {
            Location: 'HOSTING_BUCKET' //index.htmlのURLを入れる
        },
        body: ''
    };
    return response;
}

友達追加のリンクは、LINE@ MANAGERの基本設定にある友だち追加ボタンで記載されているURLを利用してください。

体験を確認してみる

ConfirmUrlType=SERVER かつ paymentUrl=appの場合

flowTypeプロパティに"HIDE_PAY_SCREEN"を指定すると、決済完了後、LINE Payの画面が閉じます。（ドキュメントには記載がありませんが、動作をすることができました。）

リクエストボディ

let paymentInfo = {
    productName: 'コーヒー',
    amount: 10,
    currency: 'JPY',
    confirmUrl: 'CONFIRM API HERE',
    confirmUrlType: 'SERVER',
    orderId: '01',
    flowType: "HIDE_PAY_SCREEN"
};

レスポンス

{
    "returnCode": "0000",
    "returnMessage": "Success.",
    "info": {
        "paymentUrl": {
            "web": "https://web-pay.line.me/web/payment/wait?xxxxxxxx",
            "app": "line://pay/payment/xxxxxxxxx"
        },
        "transactionId": 00000000000,
        "paymentAccessToken": "0000000000"
    }
}

体験を確認してみる

まとめ

今回は決済後のフローをいくつかまとめました。LINEボットの体験では決済後のフローも重要なので改善に役立てば幸いです。

チャットボット開発は弊社にご相談ください。

またAmazon Connectのキャンペーンを行なっております。こちらもご相談お待ちしております。